<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  width?: string
  height?: string
  titlebar?: boolean
  titleicon?: boolean
  searchbar?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  width: '100%',
  height: '100%',
  titlebar: false,
  titleicon: true,
  searchbar: false
})

const bindWidth = ref(props.width)
const bindHeight = ref(props.height)

const initCss = () => {
  bindWidth.value = props.width
  bindHeight.value = props.height
}
initCss()
</script>

<template>
  <div class="base-card-wrapper">
    <div v-if="props.titlebar" class="title-container card-row">
      <div class="title-part">
        <div v-if="props.titleicon" class="title-icon"></div>
        <div class="title-content">
          <slot name="title"></slot>
        </div>
      </div>
      <div class="toolbar-part">
        <slot name="toolbar"></slot>
      </div>
    </div>
    <div v-if="props.searchbar" class="search-container card-row">
      <slot name="searchbar"></slot>
    </div>
    <div class="default-container card-row">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.base-card-wrapper {
  width: v-bind(bindWidth);
  height: v-bind(bindHeight);
  background-color: var(--white-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  .card-row + .card-row {
    margin-top: 20px;
  }
  .title-container {
    @include rect(100%, auto);
    @include flex(row, space-between, center);
    .title-part {
      @include flex(row, flex-start, center);
      .title-icon {
        @include rect(3px, 16px);
        background-color: var(--theme-color);
        margin-right: 8px;
      }
      .title-content {
        @include flex(row, flex-start, center);
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: var(--black-color);
        line-height: 21px;
      }
    }
    .toolbar-part {
      @include flex(row, flex-end, center);
    }
  }
  .search-container {
    @include rect(100%, auto);
  }
  .more-container {
    @include rect(100%, 40px);
  }
  .default-container {
    width: 100%;
    flex-grow: 1;
    overflow: auto;
  }
}
</style>
